<template>
  <div>
    <c-title text="生钛机主"></c-title>
    <div class="water-use-card">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in carousel" :key="index"><img :src="item.image_url"
            @click="link(item.web_url)" /></van-swipe-item>
      </van-swipe>
      <div class="server">
        <router-link tag="div" :to="fun.getUrl('water_machine_equipment')" class="felx-column">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_set.png"
            alt="" />
          <span>设备管理</span>
        </router-link>
        <router-link tag="div" :to="fun.getUrl('water_machine_apply_for', { apply_flag })" class="felx-column" bindtap="goto"
          data-url='apply_for'>
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_apply.png"
            alt="" />
          <span>{{ text }}</span>
        </router-link>
        <router-link tag="div" :to="fun.getUrl('customerCenterIndex')" class="felx-column">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_user.png"
            alt="" />
          <span>客户</span>
        </router-link>
        <router-link tag="div" :to="fun.getUrl('withdrawal')" class="felx-column">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_cash.png"
            alt="" />
          <span>提现</span>
        </router-link>
        <div @click="link(distribution_url)" class="felx-column">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_fenxiao.png"
            alt="" />
          <span>{{ distribution_name }}</span>
        </div>
        <div @click="link(customer_url)" class="felx-column">
          <img
            src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_water_samll.png"
            alt="" />
          <span>{{ customer_name }}</span>
        </div>
        <div class="felx-column">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_master.png"
            alt="" />
          <span>{{ business_name }}</span>
        </div>
        <div>
          <template v-if="fun.isWeiXin()">
        <wx-open-launch-weapp id="launch-btn" class="launch-btn" :username="original_id" :path="external_url"
          @error="handleErrorFn" @launch="handleLaunchFn" @ready="readyFn">
          <script type="text/wxtag-template">
            <style type='text/css'>.felx-column {display: flex;align-items: center;flex-direction: column;padding: 1.0938rem 0 0.7813rem} .imgs{width: 1.5rem;height: 1.5rem} .external-name{font-size: 0.75rem;color: #7E7E7E;margin-top: 0.375rem}
            </style>
             <div class="felx-column">
              <img class="imgs" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_link.png" />
              <span class='external-name'>{{external_name}}</span>
            </div>
          </script>
        </wx-open-launch-weapp></template>
        <template v-else>
          <div class="felx-column" @click="to_other_mini">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_link.png"
              alt="" />
            <span>{{ external_name }}</span>
          </div>
        </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "",
      apply_flag: 0,
      carousel: [],
      merchant: {},
      distribution_name: "",
      distribution_url: "",
      business_name: "",
      business_url: "",
      customer_url: "",
      customer_name: "",
      external_name: "",
      external_url: "",
      original_id:"",
      external_appid: ""
    };
  },
  activated() {
    this.get_audit();
    this.getData();
  },
  methods: {
    to_other_mini(){
      this.$toast("请用手机微信打开")
    },
    get_audit() {
      $http.get('plugin.water-machine.frontend.business.merchant-audit.index').then(res => {
        if (res.result) {
          let data = res.data;
          if (data.status == 1) {
            this.text = '机主信息';
            this.apply_flag = 1;
          } else {
            this.apply_flag = 0;
            this.text = '机主申请';
          }
        } else {
          this.$toast(res.msg);
        }
      })
    },
    link(url) {
      if (url) {
        window.open(url, "_blank")
      }
    },
    getData() {
      $http.get('plugin.water-machine.frontend.business.merchant.index', {}, "").then(res => {
        if (res.result) {
          this.merchant = res.data.merchant;
          this.carousel = res.data.carousel;
          this.business_name = res.data.business_name;
          this.business_url = res.data.business_url;
          this.distribution_name = res.data.distribution_name;
          this.distribution_url = res.data.distribution_url;
          this.customer_name = res.data.customer_name;
          this.customer_url = res.data.customer_url;
          this.external_name = res.data.external_name;
          this.external_url = res.data.external_url;
          this.external_appid = res.data.external_appid;
          this.original_id = res.data.original_id;
        } else {
          this.$toast(res.msg)
        }
      })
    },
    readyFn(e) {
      console.log('readyFn', e.detail);
    },
    handleLaunchFn(e) {
      console.log('success');
    },
    handleErrorFn(e) {
      console.log('fail', e.detail);
    },

  }
};
</script>

<style scoped lang="scss">
.water-use-card {
  .felx-column {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 1.0938rem 0 0.7813rem;
  }

  .server {
    background: #fff;
    margin: 1.25rem 1.125rem;
    border-radius: 0.625rem;
    // padding: 1.0938rem 1.2813rem 0.7813rem;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .server span {
    font-size: 0.75rem;
    color: #7e7e7e;
    margin-top: 0.375rem;
  }

  .server img {
    width: 1.5rem;
    height: 1.5rem;
  }
}
</style>
